<template>
  <div>
    <h2>Web页面管理设置</h2>
    <div class="title_tips">系统中正在运行的进程概况和它们的状态信息。</div>
    <div>
      <el-card>
        <span>HTTP 监听 (IP地址：端口) </span><el-input class="http"></el-input>
        <el-input class="houzui"></el-input>

        <span class="tips"
          ><i class="el-icon-question"></i>绑定到指定的IP地址：端口</span
        >

        <div>
          <span>重定向到HTTP到HTTPS</span>
          <el-checkbox v-model="checked">
            <i class="el-icon-question"></i
            >当安装了SSL证书后，重定向HTTP到HTTPS管理页面</el-checkbox
          >
        </div>

        <div>
          <span>只允许内网访问</span>
          <el-checkbox v-model="checked">
            <i class="el-icon-question"></i
            >拒绝从互联网访问Web管理页面</el-checkbox
          >
        </div>
      </el-card>
    </div>
    <div class="button">
      <el-button class="saveOrUpdate">保存&应用</el-button>
      <el-button class="save">保存</el-button>
      <el-button class="init">复位</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: "false",
    };
  },
};
</script>

<style scoped>
.title_tips,
.tips {
  padding: 0.5rem;
  color: #999;
  font-size: small;
}

.el-input__inner {
  width: 350px;
}
.http {
  display: inline-block;
  width: 20%;
}
.houzui {
  padding-left: 193px;
  margin-top: 15px;
}
.el-card {
  padding-left: 100px;
}
.tips {
  margin-left: 190px;
}
.el-checkbox {
  padding-left: 20px;
  margin-top: 15px;
  color: #999;
  font-size: small;
}
.button {
  float: right;
  margin-top: 15px;
}
.saveOrUpdate {
  background: #4d418b;
  color: #fff;
}
.save {
  background: #825ee4;
  color: #fff;
}
.init {
  background: #2dce89;
  color: #fff;
}
</style>